---
layout: example
categories: example/v1.0.0
version: v1.0.0
title: Mouse position
description: Display geographic coordinates & pixel mouse position
tags:
  - ui
---
<style>
.ui-control {
  background:#fff;
  position:absolute;
  top:10px;
  right:10px;
  padding:10px;
  z-index:100;
  border-radius:3px;
  }
</style>

<div id='output' class='ui-control'>
  Click: <code id='click'></code><br/>
  Mousemove: <code id='mousemove'></code><br/>
</div>
<div id='map'></div>

<script>
var click = document.getElementById('click'),
    mousemove = document.getElementById('mousemove');

var map = L.mapbox.map('map')
    .setView([0, 0], 3)
    .addLayer(L.mapbox.styleLayer('mapbox://styles/mapbox/streets-v11'));

map.on('mousemove click', function(e) {
    window[e.type].innerHTML = e.containerPoint.toString() + ', ' + e.latlng.toString();
});
</script>
